<template>
  <div ref="services" class="services container-full" id="services">
    <div class="container-sm">
      <h2 class="text-center fw-bolder" data-aos="fade-up">我们的服务</h2>
      <p class="text-center yoText m-4" data-aos="fade-up">
        未来的网络是一个集群化的网络，网络中会接入各种各样的网络产品及终端，我们公司将继续深耕云的集群化管理，以满足客户的未来的网络需求，也将为客户提供优质的云管理平台。
      </p>
      <div class="row pt-4 gy-4">
        <div class="col-lg-4 col-md-6" data-aos="fade-up">
          <div class="card border-0" style="cursor: pointer">
            <div class="card-body m-4">
              <i class="bi bi-life-preserver fs-1"></i>
              <h3 class="py-4">软件服务</h3>
              <p class="fs-6 yoText">有交换机硬件，没有软件支持</p>
              <a
                href="javascript:;"
                class="border-0"
                style="text-decoration: none; color: var(--main-color)"
                >我们将提供软件服务 <i class="bi bi-arrow-right"></i
              ></a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up">
          <div class="card border-0" style="cursor: pointer">
            <div class="card-body m-4">
              <i class="bi bi-life-preserver fs-1"></i>
              <h3 class="py-4">整网管理</h3>
              <p class="fs-6 yoText">只有云的简单管理</p>
              <a
                href="javascript:;"
                class="border-0"
                style="text-decoration: none; color: var(--main-color)"
                >我们将提供整网云拓扑管理服务 <i class="bi bi-arrow-right"></i
              ></a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up">
          <div class="card border-0" style="cursor: pointer">
            <div class="card-body m-4">
              <i class="bi bi-life-preserver fs-1"></i>
              <h3 class="py-4">云管理</h3>
              <p class="fs-6 yoText">只有router、AP的终端</p>
              <a
                href="javascript:;"
                class="border-0"
                style="text-decoration: none; color: var(--main-color)"
                >我们将提供云管理服务 <i class="bi bi-arrow-right"></i
              ></a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up">
          <div class="card border-0" style="cursor: pointer">
            <div class="card-body m-4">
              <i class="bi bi-life-preserver fs-1"></i>
              <h3 class="py-4">开发业务</h3>
              <p class="fs-6 yoText">
                有硬、软件设备，但没有能力开发运营商的业务
              </p>
              <a
                href="javascript:;"
                class="border-0"
                style="text-decoration: none; color: var(--main-color)"
                >我们将提供开发运营商的服务 <i class="bi bi-arrow-right"></i
              ></a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up">
          <div class="card border-0" style="cursor: pointer">
            <div class="card-body m-4">
              <i class="bi bi-life-preserver fs-1"></i>
              <h3 class="py-4">交换机管理方案</h3>
              <p class="fs-6 yoText">只有单个网络产品</p>
              <a
                href="javascript:;"
                class="border-0"
                style="text-decoration: none; color: var(--main-color)"
                >我们将提供L3、L2、web管理方案 <i class="bi bi-arrow-right"></i
              ></a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up">
          <div class="card border-0" style="cursor: pointer">
            <div class="card-body m-4">
              <i class="bi bi-life-preserver fs-1"></i>
              <h3 class="py-4">整网解决方案</h3>
              <p class="fs-6 yoText">只有交换机或是只有路由器</p>
              <a
                href="javascript:;"
                class="border-0"
                style="text-decoration: none; color: var(--main-color)"
                >我们将提供整网解决方案 <i class="bi bi-arrow-right"></i
              ></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import mittBus from '../utils/mittBus'

const services = ref<HTMLDivElement>()

onMounted(() => {
  window?.addEventListener('scroll', () => {
    if (services.value) {
      if (services.value.getBoundingClientRect().top <= 200) {
        mittBus.emit('switchActiveMenu', '服务')
      }
    }
  })
})
</script>

<style lang="scss" scoped>
.services {
  padding: 70px 0 80px 0;
  background-color: #f6f6f6;
}
</style>
